<template>
  <div class="color">
    <div class="inner">
      <lunbo :message="message"></lunbo>
    </div>
    <div class="detail">
      <p class="big_title">藏品详情</p>
      <p v-if="message.length!=0" class="x_title">{{ message[0].title }}</p>
      <p>
        <span>年代:</span>
        <span v-if="message.length!=0">{{ message[0].Niandai }}</span>
      </p>
      <p>
        <span>类别:</span>
        <span v-if="message.length!=0">{{ message[0].Cangpinleibie }}</span>
      </p>
      <p>
        <span>藏品级别:</span>
        <span v-if="message.length!=0">{{ message[0].Cangpinjibie }}</span>
      </p>
      <p>
        <span>质地类别:</span>
        <span v-if="message.length!=0">{{ message[0].Zhidileibie2 }}</span>
      </p>
      <p>
        <span>藏品描述:</span>
        <span v-if="message.length!=0">{{ message[0].Cangpinmiaoshu }}</span>
      </p>

      <a
        class="loadown"
        :href="`${this.book}files/file?id=${this.$router.history.current.query.id}`"
      >下载</a>
    </div>
  </div>
</template>
<script>
import lunbo from "./lunbo";
import { replaceImg, replaceA } from "../../api/replace";
export default {
  data() {
    return {
      message: [
        {
          title: "",
          Niandai: "",
          Cangpinleibie: "",
          Cangpinjibie: "",
          Zhidileibie2: "",
          Cangpinmiaoshu: "",
        },
      ],
      index: 1,
    };
  },
  components: {
    lunbo: lunbo,
  },

  mounted() {
    this.look(this.$router.history.current.query.id);
  },

  methods: {
    xiazai() {
      // this.$api
      //   .get(``)
      //   .then((res) => {
      //     console.log(res);
      //   });
    },
    look(id) {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.$api.get(`${this.book}vol/antique?catid=61&id=${id}`).then((res) => {
        this.message = res.data.list;

        this.$emit("checked", this.$router.history.current.query.orderId);
      });
    },
  },
};
</script>
<style scoped>
.bread {
  max-width: 1150px;
  margin: auto;
  height: 60px;
}
.inner {
  margin: auto;
  display: flex;
  justify-items: center;
  height: 600px;
  background: #f0f0f0;
}
.detail {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-bottom: 60px;
}
.loadown {
  text-decoration: none;
  color: white;
  line-height: 50px;
  background: #144580;
  font-size: 16px;
  width: 160px;
  border-radius: 8px;
  height: 50px;
  text-align: center;
  display: inline-block;
  align-self: flex-end;
  margin-top: 20px;
}
.detail p {
  display: flex;
}
.detail p span:first-child {
  width: 80px;
}
.detail p span:nth-child(2) {
  width: 80%;
  word-wrap: break-word;
}
.big_title {
  margin-top: 48px;
  margin-bottom: 48px;
  color: #333333;
  font-size: 30px;
  box-sizing: border-box;
  padding-left: 20px;
  border-left: 8px solid #103460;
}
.x_title {
  font-size: 24px;
  color: #666666;
}
.x_content {
  font-size: 24px;
  color: #666666;
  margin-bottom: 85px;
}
</style>
